<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="../../js/jquery-1.4.2.js"></script>
    <style>
       body{
            font-family: "微软雅黑";
        }
        div,span{
            width:140px;
            height: 140px;
            margin:20px;
            border:1px solid #000;
            float:left;
            font-size:17px;
            font-family: Roman;
        }

        div.mini{
            width:40px;
            height:43px;
            background:#CC66FF;
            border : 1px solid #000;
            font-size:12px;
            font-family: Roman;
        }
        input{
            margin:5px 5px;
        }
    </style>
</head>
<body>
    <input type="button" id="b1" value="改变body内所有div的背景颜色为#F08080">
    <input type="button" id="b2" value="改变body内子div的背景颜色为#FF0033">
    <input type="button" id="b3" value="改变id 为one的下一个div的背景颜色为#0000FF">
    <input type="button" id="b4" value ="改变id为two的元素的后面的所有div兄弟元素的背景色为#9ACD32">
    <input type="button" id="b5" value ="改变id为two 的元素所有的div兄弟元素的背景色为#FF6347">
    <h1>天气热了</h1>
    <h2>天气很热了</h2>
    <div class="one">
        class是one
        <div class="mini01">class是mini01</div>
        <div class="mini">class是mini</div>
    </div>

    <div id="one">id是one</div>

    <div id="two" class="mini">
        id为two,class为mini
        <div class="mini">class是mini</div>
    </div>
    <br>
    <div id="mover">动画</div>

</body>
<script>
    $(function (){
        //改变body内所有div的背景颜色为#F08080
        $('#b1').click(function (){
            $('body div').css("background-color","#D08080")
        })
        //改变body内子div的背景颜色为#FF0033
        $('#b2').click(function (){
            $('body>div').css("background","#FF0033")
        })
        //改变id 为one的下一个div的背景颜色为#0000FF
        $('#b3').click(function (){
            $('#one+div').css("background","#0000FF")
        })
        //改变id为two的元素的后面的所有div兄弟元素的背景色为#9ACD32
        $('#b4').click(function (){
            $('#two~div').css("background","#9ACD32")
        })
         //改变id为two 的元素所有的div兄弟元素的背景色为#FF6347
         $('#b5').click(function (){
            $('#two').siblings('div').css("background","#FF6347")
        })
    })

</script>
</html>